import React, { Component } from 'react'

import { Table, Tag, Input,Button} from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import axios from 'axios';
import {getDate} from '../../until/getTime'
import { connect } from 'react-redux';

class Active extends Component {
    state={
        columns : [
            {
              title: '活动编号',
              dataIndex: 'id',
              key: 'id',
            
            },
            {
              title: '活动类型',
              dataIndex: 'type',
              key: 'type',
            },
            {
              title: '活动名称',
              dataIndex: 'name',
              key: 'name',
            },
            {
                title: '有效期',
                dataIndex: 'time',
                key: 'time',
                render:(value,item,key)=>{
                    return getDate(value)
                }
            },
            {
                title: '活动状态',
                dataIndex: 'status',
                key: 'status',
              },
              {
                  title:"操作",
                  dataIndex:'no',
                  key:'no',
                  render:(value="操作",item,key)=>{
                     
                        return <div>
                            <Tag>编辑</Tag>
                            <Tag>上线</Tag>
                            <Tag>查看</Tag>
                            <Tag onClick={()=>this.deteleItem(item.id)}>删除</Tag>
                        </div>
                  }
              }

          ],
          list:[]
          
    }
    // 点击删除
    deteleItem = async id =>{
        let res = await axios.post('/integral/active/detele',{id})
        const {code,msg} = res.data;

        if(code === 1){
            this.props.updateList(res.data.data)
        }
        alert(msg)
    }

    // 点击搜索
    searchClick = async () =>{
       
        // 在表单元素value无值的情况 通过state取值 为undefined
        // console.log(this.refs.searchValue.input.value)
        // 在表单元素value无值的情况 通过sinput取值 为 ''
        // console.log(this.refs.searchValue.state.value)
        
        let res = await axios.post('/integral/active/search',{key:this.refs.searchValue.input.value})
        const {code,msg} = res.data;

        if(code === 1){
            this.props.updateList(res.data.data)
            return 
        }
        alert(msg)
    }

    render() {
        const {columns} = this.state
        return (
            <div>
                {/* 搜索部分 */}
                <div>
                    活动名称：<Input ref="searchValue" type="text" style={{width:200}}/>
                    <Button type="primary" icon={<SearchOutlined />} onClick={this.searchClick}>
                        搜索
                    </Button>
                </div>


                {/* 添加一个活动积分类型 */}
                <div style={{padding:"20px 0"}}>
                    <Tag>添加活动</Tag>
                </div>
                
                
                {/* 列表部分 */}
                <Table rowKey={item=>item.id} columns={columns} dataSource={this.props.activeList} />
            </div>
        )
    }
    componentDidMount(){
        axios.get('/integral/activeList').then(data=>this.props.updateList(data.data.data))
    }
}


let mapStateToProps = store =>{
    const {activeList} = store
    return {
        activeList
    }
}

let mapDispatchToProps = dispatch =>{
    return {
        updateList(list){
            dispatch({type:"SET_ACTIVELIST",list})
        }
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(Active)

